<script setup lang="ts">
import JSelect from "@/components/j-select/index.vue";
import { ref } from "vue";
import { formatBigNumber } from "@/comm/format";
import i18n from "@/locals";
const navs = [
    // '行为',
    i18n.global.t("message.YTabCol.a"),
    // '地址',
    i18n.global.t("message.YTabCol.b"),
    // '互动',
    i18n.global.t("message.YTabCol.c"),
    // '数量',
    i18n.global.t("message.YTabCol.d"),
    i18n.global.t("message.YTabCol.dd"),
    // '价值',
    i18n.global.t("message.YTabCol.e"),
    // '时间',
    i18n.global.t("message.YTabCol.f")
];

// console.log('yzt===', navs);

const prop = defineProps({
    selectAction: {
        type: Function,
        default: function () {
            console.log("select组件事件");
        }
    },
    selectNumber: {
        type: Function,
        default: function () {
            console.log("select组件事件");
        }
    }
});

const selectA = {
    title: "行为",
    // child: ['转账', '交易', '充值']
    child: [
        {
            // label: "所有",
            label: i18n.global.t("message.Activity.btns.a"),
            value: null
        },
        {
            // label: "交易",
            label: i18n.global.t("message.Activity.btns.b"),
            value: "swap"
        },
        {
            // label: "转账",
            label: i18n.global.t("message.Activity.btns.c"),
            value: "transfer"
        }
    ]
};

const buttons = ref({
    title: "行为",
    child: [
        {
            // label: "所有",
            label: i18n.global.t("message.Activity.btns.a"),
            value: null
        },
        {
            // label: "交易",
            label: i18n.global.t("message.Activity.btns.b"),
            value: "swap"
        },
        {
            // label: "转账",
            label: i18n.global.t("message.Activity.btns.c"),
            value: "withdraw"
        }
        // ,
        // {
        //     // label: "充值",
        //     label: i18n.global.t("message.Activity.btns.d"),
        //     value: "deposit"
        // },
        // {
        //     // label: "提现",
        //     label: i18n.global.t("message.Activity.btns.f"),
        //     value: "deposit"
        // }
    ]
});

const selectB = ref({
    title: "价值",
    // child: ['>1k', '>10k', '>100k']
    child: [
        { label: "All", value: [] },
        { label: ">10", value: [10, 1000] },
        { label: ">1k", value: [1000, 100000] },
        { label: `>${formatBigNumber(100000)}`, value: [100000, 100000000] },
        { label: `>${formatBigNumber(100000000)}`, value: [100000000, 1000000000000] }
    ]
});
</script>

<template>
    <div class="th-r">
        <div class="th-item f-item1">
            <JSelect :select-date="buttons" :callfun="prop.selectAction">{{ navs[0] }}</JSelect><!-- 行为 -->
        </div>
        <div class="th-item f-item2">
            <div>
                {{ navs[1]
                }}<!-- 地址 -->
            </div>
        </div>
        <div class="th-item f-item3"></div>

        <div class="th-item f-item4">{{ navs[2] }}</div>
        <!-- 互动 -->

        <div class="th-item f-item5 d-flex justify-center">
            <span>{{ navs[3] }}</span>
            <span>{{ navs[4] }}</span>
        </div>
        <!-- 数量 -->

        <div class="th-item f-item6">
            <JSelect :select-date="selectB" :callfun="prop.selectNumber">{{ navs[5] }}</JSelect>
        </div>
        <!-- 价值 -->
        <div class="th-item f-item7">
            <p>{{ navs[6] }}</p>
            <div class="d-flex share_"></div>
        </div>
        <!-- 时间 -->
    </div>
</template>

<style lang="scss" scoped>
// @import url("./Activity/index.less");
.c-menu {
    box-sizing: content-box;
    border: 1px solid rgba($color: #eee, $alpha: 0.2);
    width: 40%;
    padding: 5px 5px;

    .c-label {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .c-icon {
        font-size: 10px;
    }
}

.tb {
    margin: 30px;
    margin-top: 0 !important;
    background: transparent;
    font-size: 12px;

    .th-item {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .th-r {
        height: 46px !important;
        background-color: var(--card);
        font-size: 12px;
        display: flex;
        color: #b1b6c6;
    }

    .th-t {
        background: #2b3139;
        width: 100%;
        font-size: 14px;
        display: flex;

        // border-bottom: solid 1px #3F454F;
        :deep(td) {
            border-color: #363b43 !important;
        }
    }

    .th-body {
        width: 100%;
        padding: 8px 0;
        display: flex;
        border-bottom: solid 1px var(--border);
        background: var(--card);
    }

    .f-item1 {
        // background-color: blue;
        flex: 0.2;
        padding-inline-start: var(--px);
    }

    .f-item2 {
        // background-color: blueviolet;
        flex: 0.3;
    }

    .f-item3 {
        // background-color: brown;
        flex: 0.2;
    }

    .f-item4 {
        // background-color: cadetblue;
        flex: 0.3;
    }

    .f-item5 {
        flex: 0.4;

        span:nth-child(1) {
            margin-left: 50px;
        }

        span:nth-child(2) {
            margin-left: 20px;
        }

        // background-color: olivedrab;
    }

    .f-item6 {
        // background-color: #737B82;
        justify-content: flex-end !important;
        padding-right: 50px;
        flex: 0.2;
    }

    .f-item7 {
        display: flex;
        padding-right: var(--px);
        // justify-content: end;
        justify-content: flex-end;
        flex: 0.2;

        p {
            width: 40%;
            text-align: right;
            // background-color: blue;
        }

        .share_ {
            margin-left: 30px;
            justify-content: flex-end;
            // background-color: royalblue;
        }
    }

    .f-item3,
    .f-item6 {
        display: flex;
        justify-content: center;
    }
}
</style>
